<template>
  <z-select
    v-model:value="value"
    :options="options"
    style="width: 200px"
    @change="handleChange"
  />
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'SelectDemo6',
  setup() {
    const value = ref('')
    const options = ref([
      {
        label: 'Manager',
        options: [
          {
            value: 'jack',
            label: 'Jack'
          },
          {
            value: 'lucy',
            label: 'Lucy'
          }
        ]
      },
      {
        label: 'Engineer',
        options: [
          {
            value: 'yiminghe',
            label: 'Yiminghe',
          }
        ]
      }
    ])

    const handleChange = (value) => {
      console.log(`selected ${value}`)
    }
    return {
      value,
      options,
      handleChange,
    }
  }
})
</script>
